<%@ page language="java" pageEncoding="UTF-8"%>
<%@include file="/global/global-head.jsp" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>吉车惠后台管理系统</title>
    <%@include file="/global/global-other.jsp" %>
    <script type="text/javascript">
        var leftRoleDatagrid;
        var rightRoleDatagrid;
        $(function() {
            submitForm = function( $dialog){
                var roleIds = [];
                var rows = rightRoleDatagrid.datagrid("getRows");
                for(var i=0;i<rows.length;i++) {
                    roleIds.push(rows[i].roleId);
                }
                $.post('${ctx}/sys/admin/grant?_m=exec&r='+Math.random(), {"adminId":"${adminId}","roleIds":roleIds.join(',')}, function(json) {
                    if(statusMsg(json)){
                        parent.$.messager.alert("提示","保存成功！","info",function(){
                            $dialog.dialog('destroy');
                        });
                    }
                }, "JSON");
            };

            leftRoleDatagrid = $('#leftRoleDatagrid').datagrid({
                filterBtnIconCls:'icon-filter',
                queryParams: {
                    "adminId": '${adminId}'
                }
            });
            rightRoleDatagrid = $('#rightRoleDatagrid').datagrid({
                filterBtnIconCls:'icon-filter',
                queryParams: {
                    "adminId": '${adminId}'
                }
            });

            leftAdd = function(){
                var row = leftRoleDatagrid.datagrid('getSelected');
                if (row) {
                    rightRoleDatagrid.datagrid('insertRow',{
                        index: 0,
                        row: row
                    });

                    var rowIndex = leftRoleDatagrid.datagrid('getRowIndex', row);
                    leftRoleDatagrid.datagrid('deleteRow', rowIndex);
                }else{
                    parent.$.messager.alert("提示",errMsg("请选择一行数据！"),"error");
                }
            }

            rightAdd = function(){
                var row = rightRoleDatagrid.datagrid('getSelected');
                if (row) {

                    leftRoleDatagrid.datagrid('insertRow',{
                        index: 0,
                        row: row
                    });

                    var rowIndex = rightRoleDatagrid.datagrid('getRowIndex', row);
                    rightRoleDatagrid.datagrid('deleteRow', rowIndex);
                }else{
                    parent.$.messager.alert("提示",errMsg("请选择一行数据！"),"error");
                }
            }

        });
    </script>
    <style type="text/css">
        .panel-header{background:#78bff7};
    </style>
</head>
<body>
<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'west',split:false,border:false" style="width:428px;">
        <div class="easyui-panel" title="<i class='fa fa-user' aria-hidden='true'></i>&nbsp;系统角色" style="width:428px;height:365px;color:#000000;">
            <table id="leftRoleDatagrid"  style="width:100%;height:100%"
                   data-options="border:false,rownumbers:true,autoRowHeight:false,singleSelect:true,sortName:'createAt',sortOrder:'desc',rowStyler: function(index,row){return {style:'height:30px'};},url:'${ctx}/sys/admin/ungrant?_m=load',method:'post'">
                <thead>
                <tr>
                    <th data-options="field:'roleName',width:120,align:'center'">角色名称</th>
                    <th data-options="field:'roleTypeName',width:80,align:'center'">角色类型</th>
                    <th data-options="field:'useStatus',width:80,align:'center',formatter:
                    function(value,row,index){
                        if(row.useStatus=='1'){
                            return '使用';
                        }else if(row.useStatus=='2'){
                            return '<span style=\'color:red;\'>未使用</span>';
                        }
                    }
                    ">使用状态</th>
                    <th data-options="field:'des',width:150,align:'center'">描述</th>
                    <th data-options="field:'t',width:20,align:'center'"></th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
    <div data-options="region:'east',split:false,border:false" style="width:428px;">
        <div class="easyui-panel" title="<i class='fa fa-user' aria-hidden='true'></i>&nbsp;已授权角色" style="width:428px;height:365px;color:#000000;">
            <table id="rightRoleDatagrid"  style="width:100%;height:100%"
                   data-options="border:false,rownumbers:true,autoRowHeight:false,singleSelect:true,sortName:'createAt',sortOrder:'desc',rowStyler: function(index,row){return {style:'height:30px'};},url:'${ctx}/sys/admin/grant?_m=load',method:'post'">
                <thead>
                <tr>
                    <th data-options="field:'roleName',width:120,align:'center'">角色名称</th>
                    <th data-options="field:'roleTypeName',width:100,align:'center'">角色类型</th>
                    <th data-options="field:'useStatus',width:100,align:'center',formatter:
                    function(value,row,index){
                        if(row.useStatus=='1'){
                            return '使用';
                        }else if(row.useStatus=='2'){
                            return '<span style=\'color:red;\'>未使用</span>';
                        }
                    }
                    ">使用状态</th>
                    <th data-options="field:'t',width:20,align:'center'"></th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
    <div data-options="region:'center',border:false">
        <div style="padding-top:140px;text-align: center;">
            <a class="btn btn-info" href="#" onclick="leftAdd()"><i class="fa fa-arrow-circle-right fa-1x"></i></a>
            <div style="height:10px;line-height: 10px;"></div>
            <a class="btn btn-info" href="#" onclick="rightAdd()"><i class="fa fa-arrow-circle-left fa-1x"></i></a>
        </div>
    </div>
</div>
</body>
</html>